<template>

<div>
<!-- 面包图-->
  <!-- <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/staff">员工管理</a></el-breadcrumb-item>
  <br>
</el-breadcrumb> -->
<!-- 卡片视图 -->
  <el-card>
    <el-row>
      <!-- 搜索框 -->
      <el-col :span="8">
        <div class="grid-content bg-purple-dark">
          <el-input placeholder="请输入内容" v-model="search.phone">
            <el-button slot="append" icon="el-icon-search" @click="btnsearch"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>


  </el-card>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    border header-align="center" style="width: 1600px"
    @selection-change="handleSelectionChange">
    <!-- 多选框 -->
    <el-table-column
      fixed="left"
      type="selection"
      width="55">
    </el-table-column>
    <!-- 索引列用index标识 -->
    <el-table-column
      label="序号"
      type="index"
      width="60"
      fixed="left">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="subbranch.name"
      label="所属门店"
      width="120">
    </el-table-column>
    <el-table-column
      prop="roleId"
      label="员工编码"
      width="120">
    </el-table-column>
       <el-table-column
      prop="group"
      label="组名"
      width="100">
      <template slot-scope="scope"   >
       {{scope.row.groupId === 1 ? 'A组' : 'B组'}}
     </template>
    </el-table-column>
    <el-table-column
      prop="nickname"
      label="用户名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="role.name"
      label="角色名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="idcode"
      label="身份证号"
      width="240">
    </el-table-column>
       <el-table-column
      prop="phone"
      label="联系电话"
      width="120">
    </el-table-column>
    <el-table-column
      
      label="当前状态"
      width="100">
     <template slot-scope="scope"   >
       {{scope.row.status === true ? '在职' : '离职'}}
     </template>
    </el-table-column>
    <el-table-column 
      label="操作"
      width="170"
      fixed="right"
    >
    
      <template slot-scope="scope">
        <!-- 编辑组件 -->
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"><staffeditor :form = 'form'/></el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    
  </el-table>
  <!-- 分页 -->
 <!-- <div class="block">
     <el-pagination
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pagenum"
      layout=" prev, pager, next,size"
     >
    </el-pagination>
  </div> -->

  <div class="block">
  <el-pagination
  @current-change="handleCurrentChange"
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>
  <!-- 下方卡片视图 -->
  <el-card>
    <el-row>
        <!-- 批量删除 -->
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" >
          <el-button type="warning" @click="moneydel">批量删除</el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>
  
</div>  
</template>



<script>
import staffeditor from './staffeditor.vue';
import {staffgetPost,delPost}from '../../http/api';
export default {
  components: { staffeditor },
    methods:{
    //   //监听pagesize的事件
    // handleSizeChange(newSize){
    //   console.log(newSize)
    //   this.queryinfo.size = newSize,
    //   // 改变后要重新渲染
    //   this.getlist()
    // },
    //监听页码值的改变
    handleCurrentChange(newPage){
      console.log(newPage)
      this.queryinfo.page = newPage
      this.getlist()
    
},
      // 批量删除框
    handleSelectionChange(val) {
             let sum= val;
              console.log(sum, sum.length);
               console.log(sum[0].id);
              //将接受的数组的id处理出来返回
              var arrstaffdel=[]
               arrstaffdel=sum.map(function(item){
                 return item.id
               })
             console.log(arrstaffdel)  
             window.arrstaffdel = arrstaffdel   
      },
       // 批量删除
      moneydel(){
          delPost(window.arrstaffdel)
            .then((value)=>{
              console.log('删除成功',value.msg)
              // 删除后重新发送获取列表的请求
              this.getlist()
        })
            .catch((err)=>{
              console.log('删除失败',err)
        })
      },
      // 编辑事件
    handleEdit(index, row) {
        console.log(index, row);
        this.ddd = row
        //改变指针、、然后在组件中将form传递下去
        this.form = JSON.parse(JSON.stringify(this.ddd))
        

          // person = Object.create(row);
          // console.log (person,'duixiang1')
          // window.person = person
         
      },
      // 删除按钮
    handleDelete(index,row) {
        // 给删除按钮添加弹框
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'   
          });
          // 删除请求
          // 将选中的数值id返回给爱如如
          let arr2 = []
          arr2.push(row.id)
          delPost(arr2)
            .then((value)=>{
              console.log('删除成功',value.msg)
              // 删除后重新发送获取列表的请求
              this.getlist()
        })
            .catch((err)=>{
              console.log('删除失败',err)
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 列表渲染请求
      getlist(){
       staffgetPost(this.queryinfo.page,this.queryinfo.size)
        .then((res)=>{
          console.log('接口调用成功',res.data.value.data)
          this.tableData = res.data.value.data
        })
        .catch((err)=>{
          console.log('接口调用失败',err)
        })
      },
      // 搜索框
      btnsearch(){
        console.log(this.search.phone)
        // stafffindPost(this.search)
         .then((res)=>{
          console.log('接口调用成功',res)
          this.tableData = res.data.value.data
          
        })
         .catch((err)=>{
          console.log('接口调用失败',err)
        })

      }
    },
    // 开始时渲染数据
   created(){
        this.getlist()
    },
    data() {
      return {
        form:{},
        ddd:{},
       
        //表格渲染数据
        tableData: [],
        
      formLabelWidth: '120px',
      search:{
        phone:''
      },
      // 获取用户列表的参数
      queryinfo:{
        // 
        query:'',
        // 当前页数
        page:'1',
        //当前每页写多少数据
        size:'5',
        //当前显示页
        pagenum:'1'
      }
        }
        
}
}
</script>



<style lang="less" scoped>
.el-card {
  box-shadow: 0 0 0 rgb(0, 0, 0, 0.15);
}
.el-table-column{
    text-align: center;
} 
</style>>
 
